const path = require('path')
const webpack = require('webpack')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
// console.log(__dirname)
const loadUse = (loader) => {
  const arr =  [ // 解析器解析规则 ---- 从后到前
    { loader: MiniCssExtractPlugin.loader },
    { loader: 'css-loader' },
    { loader: 'postcss-loader', options: { // 配置自动补全css
      postcssOptions: {
        plugins: [
          [
            'autoprefixer',
            {
              overrideBrowserslist: ['last 100 versions']
            }
          ],
          [
            'postcss-preset-env',
            {
              // Options
            }
          ]
        ]
      }
    } },
    { loader: loader }
  ]
  if (!loader) {
    arr.pop()
  }
  return arr
}
module.exports = { // webpack 是基于nodejs
  mode: 'development', // 打包完文件未压缩
  // mode: 'production', // 打包完文件压缩
  // 当前程序的入口，必不可少 打包时 通过  webpack 指令
  // entry: './src/index.js'
  // entry: ['./src/index.js']
  entry: {
    app: './src/index.js'
  },
  output: {
    path: path.resolve(__dirname, '../', 'build'),
    filename: '[name].[hash:8].js'
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new CleanWebpackPlugin(),
     // 压缩css文件 ---- 提取css文件
    new MiniCssExtractPlugin({
      filename: 'css/[name].[hash:8].css'
    }),
    new CopyWebpackPlugin({  // 克隆 src/assets 文件夹至输出目录下的 static 文件夹
      patterns: [
        {
          from: './src/assets',
          to: 'static'
        },
        {
          from: './public/favicon.ico',
          to: ''
        }
      ]
    }),
    new HTMLWebpackPlugin({
      template: './public/index.html',
      title: 'webpack 神奇之旅'
    })
  ],
  module: { // 用来处理各种后缀名不同的文件 ---- 万物皆模块
    rules: [
      {
        test: /\.css$/, // 正则
        use: loadUse()
      },
      {
        test: /\.scss$/, // 正则
        use: loadUse('sass-loader')
      },
      {
        test: /\.less$/, // 正则
        use: loadUse('less-loader')
      },
      {
        test: /\.stylus$/, // 正则
        use: loadUse('stylus-loader')
      },
      // css中有背景图片地址
      {
        test: /\.(jpg|jpeg|png|gif|webp|svg)$/,
        use: {
          loader: 'url-loader',
          options: {
            // 如果设置的值足够大，显示base64图片地址（内存中）
            // 如果设置的值足够小，显示图片的地址
            limit: 2048000, // 单位为字节
            publicPath: './../' // css 采取模块化，
          }
        }
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          // options: {
          //   presets: ['@babel/preset-env'] // 处理js的高级语法
          // }
          // options: { // 如果遇到 js 的高级语法，需要用以下的预设去解决
          //   presets: ['@babel/preset-env'],
          //   // 配置属性，排除错误
          //   sourceType: 'unambiguous',
          //   plugins: [ // 插件 
          //     [
          //       '@babel/plugin-transform-runtime'
          //     ]
          //   ]
          // }
          // options: {
          //   presets: ['@babel/preset-env'],
          //     // 配置属性，排除错误
          //     sourceType: 'unambiguous',
          //   plugins: [
          //     [
          //         '@babel/plugin-transform-runtime'
          //     ],
          //     [
          //       '@babel/plugin-proposal-class-properties', // 处理类的静态属性 state = { a: 1}
          //       {
          //         loose: true
          //       }
          //     ],
          //     ["@babel/plugin-proposal-private-methods", { "loose": true }]
          //   ]
          // }
          options: { // 如果遇到 js 的高级语法，需要用以下的预设去解决
            presets: ['@babel/preset-env', '@babel/preset-react'],
            // presets: [ // 垫片
            //   [
            //     '@babel/preset-env',
            //     {
            //       useBuiltIns: 'usage'
            //     }
            //   ]
            // ],
            // 配置属性，排除错误
            sourceType: 'unambiguous',
            plugins: [ // 插件 
              [
                '@babel/plugin-transform-runtime'
              ],
              [ // 装饰器语法的配置
                '@babel/plugin-proposal-decorators',
                { "legacy": true }
              ],
              [ // 处理 类的 属性 时用的， 不写构造函数
                '@babel/plugin-proposal-class-properties',
                {
                  loose: true
                }
              ],
              ["@babel/plugin-proposal-private-methods", { "loose": true }]
            ]
          }
        }
      }
    ]
  },
  devServer: {
    port: 8000,
    open: true,
    proxy: {
      '/api': { // /api/pro/list
        target: 'http://121.89.205.189/api',
        pathRewrite: {
          '^/api': '' // 以 /api 开头的才去代理 
        }
      },
    }
  }
}